<template>
  <div class="ibox roleManage">
      <div class="ibox-title">
          <h5>学历集</h5>
          <div class="ibox-tools">
              <a  class="dh"><i class="fa fa-chevron-up"  v-on:click="toggle"></i></a>
              
              <a ><i class="fa fa-times"></i></a>
          </div>
      </div>
      <div class="ibox-centent" v-show="isShow">
          <div class="row">
              <div class="search">
                     <a class="btn" @click="create"><i class="fa fa-plus"></i>新增</a>
                 
              </div>
              <!-- fa fa-refresh -->
              <div class="tt">
                    <el-table :data="tableData" style="width: 100%">
                              <el-table-column type="index" label="序号" width="49">
                              </el-table-column>
                              <el-table-column property="codeName" label="名称" width="260">

                              </el-table-column>
                              <el-table-column property="name" label="学历选项" width="200">
                                <template scope="scope">
                                    <span v-for="(role,i) in scope.row.childs_edus">
                                      <el-tag v-if="role.codeName" type="success">{{role.codeName || null}}</el-tag>&nbsp
                                    </span> 
                                </template>
                              </el-table-column>
                              <!--<el-table-column property="unit" label="所属单位" width="200">
                              </el-table-column>-->
                              <el-table-column property="code" label="排序号" width="200">

                              </el-table-column>
                              <el-table-column property="" label="操作" width="620">
                                  <template scope="scope">
                                    <span class="opt-btn-sp">
                                    <!--<a  @click='modifyRoleDialog(scope)'><i class="fa fa-key"></i>角色授权</a>-->
                                    <a title="编辑" @click='modifyDialog(scope)'><i class="fa fa-edit"></i>编辑</a>
                                  
                                    </span>   
                                <!--icon删除图标-->
                                    <span class="delete" title="删除"><a @click="del(scope)"><i class="fa fa-remove"></i>删除</a></span>
                                  </template>
                              </el-table-column>

                        </el-table> 
              </div>
              
          </div>
          <!-- <div class="fy">
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage3"
                    :page-size="100"
                    layout="prev, pager, next, jumper"
                    :total="1000">
                    </el-pagination>
                </div>
        </div> -->
        <!--<div class="dialog">
          <cxo-dialog></cxo-dialog>
          <business-dialog><</business-dialog>
          <department-dialog></department-dialog>
          <headquarters-dialog></headquarters-dialog>
          <role-dialog></role-dialog> 
        </div>-->
        <el-dialog :visible.sync="modifyShow" :title="title" >
            <div>
              <div class="title-modify">名称</div>
              <div>
                 <el-input v-model="editData.codeName" @keyup.enter.native="confirmModify" auto-complete="off"></el-input>
              </div>
              <div class="title-modify">学历项 (添加多项请；分开)</div>
              <div class="deg-contain" @click="focusInput">
                 <span v-for="(role,i) in editData.childs_edus">
                    <el-tag v-if="role.codeName" @close="handleClose(i)" closable type="success">{{role.codeName || null}}</el-tag>&nbsp
                 </span> 
                 <input ref="setTag" type="text" v-model="inputValue" @keyup.enter="confirmInput"  @keyup.delete="deleteTag" class="input"  />
              </div>
              <div class="title-modify">排序号</div>
              <div>
                 <el-input v-model="editData.code" @keyup.enter.native="confirmModify" auto-complete="off"></el-input>
              </div>
            </div>

              <!--<el-form-item label="名称" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>-->
     
            <div slot="footer" class="dialog-footer">
              <el-button @click="modifyShow = false">取 消</el-button>
              <el-button type="primary" @click="confirmModify">保 存</el-button>
            </div>

        </el-dialog>

        <el-dialog :visible.sync="modifyRole" title="授权-系统管理员">
          <el-tree
            :data="treeData"
            show-checkbox
            ref="roleTree"
            :default-checked-keys="defaultChecked"
            :props="defaultProps">
          </el-tree>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modifyRole = false">取 消</el-button>
            <el-button type="primary" @click="saveRoleModify">保 存</el-button>
          </div>
        </el-dialog>

      </div>
  </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from "vue";
import {
  Select,
  Input,
  Table,
  TableColumn,
  Tag,
  Pagination,
  Dialog,
  MessageBox,
  Message,
  Tree,
} from "element-ui";

Vue.use(Select);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Tag);
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Tree);

// import cardLeader from "@/components/card-leader";
// import searchBox from "@/components/search-box";
// import adminUrl from "@/common/js/adminUrl";
// import CxoDialog from "@/components/userManager/dialog/CxoDialog";
// import BusinessDialog from "@/components/userManager/dialog/BusinessDialog";
// import DepartmentDialog from "@/components/userManager/dialog/DepartmentDialog";
// import HeadquartersDialog from "@/components/userManager/dialog/HeadquartersDialog";
// import RoleDialog from "@/components/userManager/dialog/RoleDialog";
export default {
  components: {
    // CxoDialog,
    // BusinessDialog,
    // DepartmentDialog,
    // HeadquartersDialog,
    // RoleDialog
  },
  data() {
    return {
      editFormVisible: false,
      dialogTableVisible: false,
      input5: "",
      isShow: true,
      tableData: null,
      currentRow: null,
      modifyShow:false,
      parentId:null,
      inputValue:null,
      title:"学历集修改",
      modifyRole:false,
      defaultProps: {
        children: 'subId',
        label: 'name'
      },
      type:null,
      defaultChecked:null,
      treeData:null,
      RoleId:null,
      form: {
          name: '', 
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
      },
      formLabelWidth: '120px',
      editData:{}
      
    };
  },
  mounted: function() {
    this.refresh();
    //绑定子页面需要的刷新模块方法
  },
  methods: {

    toggle: function() {
      this.isShow = !this.isShow;
    },
    modifyDialog:function(scope){
      this.inputValue = null;
      this.editData = {};
      this.type=null;
      this.editData = JSON.parse(JSON.stringify(scope.row));
      this.parentId = this.editData.id;      
      this.modifyShow = true;
    },
    salaryDetail: function() {
      this.dialogTableVisible = true;
    },
    handleClose:function(i){
        this.editData.childs_edus.splice(i,1);
    },
    focusInput:function(){
        this.$refs.setTag.focus();
    },
    confirmInput:function(){
       var value = this.$refs.setTag.value.trim();
       var splitValue = value.split("；").length>1 ? value.split("；") : value.split(";");
       var addTagValue;
       if (splitValue.length === 1) {
          // addTagValue = splitValue[0];
          if (this.type==="create"){
              this.editData.childs_edus.push({
                codeName:splitValue[0]
              })
          } else {
              this.editData.childs_edus.push({
                parentId:this.parentId,
                codeName:splitValue[0]
              })
          }

       } else {

          for (var i=0; i<splitValue.length;i++) {
              if (this.type==="create"){
                  this.editData.childs_edus.push({         
                    codeName:splitValue[i]
                  })
              } else {
                  this.editData.childs_edus.push({
                    parentId:this.parentId,
                    codeName:splitValue[i]
                  })
              }
          }
       }
    },
    refresh:function(){
      var self = this;
      // this.URL.eduStructureBylist.url
      this.Axios.Post(this.URL.eduStructureBylist.url).then(function(res) {
        self.tableData = res.data.datas.education;
        
      });
    },
    create:function(){
      this.title = "创建学历集";
      this.type = "create";
      this.editData = {
         childs_edus : [],
         codeName:null,
         code:null
      };
      this.inputValue = null;
      this.modifyShow = true;
    },
    confirmModify: function(type) {
      var self = this;
      if (!(/^[1-9]\d*$/.test(this.editData.code))){
          Message({
                  message: '排列号请输入整数',
                  type: 'error'
          });
          return;
      };

      if (this.type==="create") {
          this.Axios.Post(this.URL.addeduStructureById.url,this.editData).then(function(res){
              Message({
                  message: '创建成功',
                  type: 'success'
              });
              self.refresh();
          });
      } else {
        // this.URL.upeduStructureById.url
           this.Axios.Post(this.URL.upeduStructureById.url,this.editData).then(function(res){
              Message({
                  message: '修改成功',
                  type: 'success'
              });              
              self.refresh();
              
          });       
      }

      this.modifyShow = false;

    },
    deleteTag:function(){
        var value = this.$refs.setTag.value.trim();
        if (value) {
            return;
        }
        var length = this.editData.childs_edus.length;
        if (length > 0) {
            this.editData.childs_edus.splice(length-1,1);
        }     
    },
    del:function(scope){
        var self = this;
        var roleId = String(scope.row.id);
    
        // var name = scope.row.name;
        MessageBox.alert('此操作将永久删除该权限,是否继续', '是否删除 '+name, {
        confirmButtonText: '确定',
        cancelButtonText:"取消",
        callback: action => {
            if (action === "cancel") {
                return;
            }
            // self.URL.deleduStructureById.url
            self.Axios.Post(self.URL.deleduStructureById.url,{edu_id:roleId}).then(function(){
                self.refresh();
                Message({
                        message: '删除成功',
                        type: 'success'
                });
            })
            self.refresh();
        }
      })
    },
    modifyRoleDialog:function(scope){
      var self = this;
      this.title = "角色修改";
      self.RoleId = scope.row.id;
      // 
      this.Axios.Post(this.URL.rolePermission.url+"?roleId="+scope.row.id).then(function(res){
          self.defaultChecked = res.data.datas.permissionIds;
          console.log(self.defaultChecked);
          self.treeData = res.data.datas.allPermission;
          console.log(self.treeData,"treeData");
          
          
          self.modifyRole = true;
      })

    },
    saveRoleModify:function(){
      var checked = this.$refs.roleTree.getCheckedKeys();
      var nodes = this.$refs.roleTree.getCheckedNodes();
      var arr=[];
      for(let i=0;i<nodes.length;i++){
          if(!nodes[i].subId || nodes[i].subId.length===0){
              arr.push(nodes[i].id);
          }
      }
      // arr = arr.join(',');
      var params = {
          roleId : this.RoleId,
          permissions:arr
      };
      this.Axios.Post(this.URL.saveRolePermission.url,params).then(function(res){
          Message({
              message: '修改成功',
              type: 'success'
          });        
      })
      // this.Axios.Post('http://192.168.100.58:8080/role/saveRolePermission',params).then(function(res){
      //     Message({
      //         message: '修改成功',
      //         type: 'success'
      //     });        
      // })
    }

  },

  beforeDestroy: function() {

  }
};
</script>

<style scoped>
.dialog {
    background-color: #fff;
    padding: 100px;
}
.groupManage .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.groupManage .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}
.deg-contain{
   border:1px solid #8391a5;
   min-height:60px;
   border-radius: 6px;
}
.content-right {
  float: right;
  margin-top: 17px;
}

.groupManage .select-dept {
  font-size: 14px;
}
.groupManage .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}
.groupManage .switch-btn {
  padding: 10px 10px;
}
.groupManage .collapse-card {
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.groupManage .third-card {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.groupManage .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.groupManage .third-card .collapse-card .box-title .box-header > .box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
.groupManage .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
/*content*/
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}
.ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}

.ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}
.ibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}
/*ibox-centent*/
.ibox-centent {
  padding: 20px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
}
.row .tt{
  padding:0 30px;
}

.row .search {
  width: 100%;
  margin-bottom: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.row .search .btn{
    
    width:70px;
    height:34px;
    line-height:34px;
    text-align:center;
    color:#fff;
    display:inline-block;
    background-color:#18a689;
    border-radius:5px;
}
.row .search .btn:first-child{
    margin-left:20px;
}

.row .search .btn:hover{
  background-color:#ccc;
  color:#000;
  cursor:pointer;
}
.row .search .wi {
  width: 33.3333333%;
}
.el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
}
.search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}
.el-button .r {
  width: 66.66666667%;
}
.el-input-group__append .el-button {
  background: #1ab394;
  color: #fff;
  border: 1px solid #1ab394;
}
/*table*/
.el-table__header-wrapper thead div {
  background-color: #fff;
  color: #1f2d3d;
}
.btn-sp {
  padding-left: -10px;
}
.btn-sp > a {
  border: 1px solid #23c6c8;
  background: #23c6c8;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.delete > a {
  border: 1px solid #ec4758;
  background: #ec4758;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}
.el-pagination {
  margin-top: 20px;
}
/*角色授权*/
.modal-content {
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: 0 none;
  position: relative;
}
.modal-header .close {
  margin-top: -2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: black;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: 0.2;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 14px;
}
.modal-body {
  padding: 20px 30px 30px 30px;
  position: relative;
}
.el-dialog__body {
  color: #48576a;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
}
.input{
  border:none;
}
.input:focus{
  border:none;
  outline:none;
}
.title-modify{
  height:40px;
  line-height:40px;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.modal-footer {
  margin-top: 0;
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #ffffff;
  padding: 8px 13px;
  border-radius: 3px;
  border: 1px solid #1ab394;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
  padding: 8px 13px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}
/* .btn-default {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
} */
.glyphicon {
  position: relative;
  top: 3px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*图标*/
.glyphicon-off:before {
  content: "\e017";
}
</style>
<style>
/*修改element-ui样式*/

.groupManage .el-radio-button__inner:hover {
  color: #333;
}
.groupManage .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.groupManage .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.groupManage .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
/*i*/
.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}
.el-input-group--append .el-input__inner,
.el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
}
.el-input-group__append .el-button[data-v-4fefba28] {
  border: 1px solid #1ab394;
  border-radius: 0px 3px 3px 0px;
  line-height: 0.99;
}
/*table*/
.el-table {
  border: none !important;
}
.el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}
.el-table__footer-wrapper thead div,
.el-table__header-wrapper thead div {
  background: #fff !important;
  border-right:none;
}
.el-table .cell {
  padding: 10px;
  cursor: pointer;
}
.el-table .cell > div {
  text-align: center;
}
.el-table__body-wrapper {
  overflow: visible !important;
}
.el-table .cell,
.el-table th > div {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.ibox-tools dh {
  background: red;
  display: inline-block;
}
.el-tag--success {
  margin-top: 3px;
}
/*.el-dialog__body {
  padding: 0px !important;
  color: #48576a;
  font-size: 14px;
}*/
/*.el-dialog__header {
  display: none;
}*/
.btn-primary:hover,
.btn-primary:focus {
  background-color: #18a689 !important;
}
.btn-default:hover {
  background-color: #e6e6e6 !important;
  cursor: pointer;
  border: 1px solid #d2d2d2 !important;
}
.roleManage .el-form .el-form-item{
  width:80%;
}
.roleManage .el-form .el-select {
    width: 100%;
}
</style>
